<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>酒店轮播图管理</title>
    <link href="/resources/hotel/css/style.css" rel="stylesheet" type="text/css"/>
    <script src="/resources/hotel/js/jquery-3.3.1.js"></script>
    <script src="/resources/hotel/js/imagePreview.js"></script>
    <style type="text/css">
        a {
            cursor: pointer;
            text-decoration: underline;
        }

        input {
            border: #b7d5df solid 0.3px;
        }

        select {
            border: #b7d5df solid 0.3px;
        }

        .paginList li {
            margin-left: 50px;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".click").click(function () {
                $(".tip").fadeIn(200);
            });

            $(".tiptop a").click(function () {
                $(".tip").fadeOut(200);
            });

            $(".sure").click(function () {
                $(".tip").fadeOut(100);
            });

            $(".cancel").click(function () {
                $(".tip").fadeOut(100);
            });

        });
    </script>
</head>
<body>

<div class="place">
    <span>位置：</span>
    <ul class="placeul">
        <li><a href="#">酒店信息管理</a></li>
        <li><a href="#">轮播图管理</a></li>
    </ul>
</div>

<div class="rightinfo">
    <!--搜索的div-->
    <div class="formtitle" style="margin-top: 10px;"><span>搜索轮播图信息</span></div>
    <form id="findForm">
        <table class="tablelist" style="width: 800px;">
            <thead>
            <tr>
                <th style="width:200px;">轮播图名称</th>
                <th>描述</th>
                <th>图片显示位置</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><input type="text" id="nameOfFind" style="height: 30px;"></td>
                <td><input type="text" id="descOfFind" style="height: 30px;"></td>
                <td>
                    <select style="border: #00a4ac 0.3px solid;" id="swLocOfFind">
                        <option value="">--请选择--</option>
                        <option value="1">平台主页</option>
                        <option value="0">酒店详情页</option>
                    </select>
                </td>
                <td><a href="#" class="tablelink" id="find">搜 索</a></td>
            </tr>
            </tbody>
        </table>
    </form>

    <div class="formtitle"><span>酒店轮播图</span></div>
    <div style="width: 1500px;" id="imageAll"></div>
    <div class="tools" style="margin-top: 250px;margin-left: 10px;">
        <ul class="toolbar">
            <li id="deleteSpan" style="display: none;"><span><img src="/resources/hotel/images/t03.png"/></span>删除选中
            </li>
        </ul>
    </div>

    <!--翻页的div-->
    <div class="pagin">
        <div class="message">共 <i class="blue" id="countData">0</i> 条记录，共 <i class="blue" id="countPage">0</i> 页，当前显示第&nbsp;<i
                class="blue" id="nowPage">0&nbsp;</i>页
        </div>
        <ul class="paginList" style="margin-right: 50px;">
            <li class="paginItem"><span><a style="width: 70px;" id="upPage" onclick="flip(-1)">上一页</a></span></li>
            <li class="paginItem">
                <input id="finPageBox" type="text" style="width: 60px;height: 25px; "
                       onkeypress="return event.keyCode>=48&&event.keyCode<=57" ng-pattern="/[^a-zA-Z]/"/>
                <button style="padding: 5px 10px;font-size: 12px;" id="findPageButton" onclick="flip(0)">跳转</button>
            </li>
            <li class="paginItem"><span><a style="width: 70px;border: solid 1px lavender;" id="nextPage"
                                           onclick="flip(1)">下一页</a></span></li>
        </ul>
    </div>

    <div class="formtitle" style="margin-top: 20px;"><span>添加新的轮播图</span></div>
    <table class="tablelist" style="width: 1300px;">
        <thead>
        <tr>
            <th style="width: 170px;">图片名称</th>
            <th style="width: 280px;">图片描述</th>
            <th>选择图片</th>
            <th style="width: 170px;">图片预览</th>
            <th>图片显示位置</th>
            <th>是否启用</th>
            <th>图片权重</th>
            <th style="width: 76px;">
                <button id="addTr"
                        style="background: #3c95c8;color: #b7d5df;border: 0.5px solid;font-size: 18px;padding: 4px 13px;margin-left: -5px;cursor: pointer;">
                    增 加
                </button>
            </th>
        </tr>
        </thead>
        <form id="addForm">
            <tbody id="addTbody">
            </tbody>
        </form>
    </table>
    <div><input name="" type="button" class="btn" value="确认添加" style="display: none;" id="addOK"/></div>
    <!--删除提示框-->
    <div class="tip" id="deleteTip" style="height: 300px;">
        <div class="tiptop"><span>提示信息</span><a></a></div>
        <div class="tipinfo">
            <span><img src="/resources/hotel/images/ticon.png"/></span>
            <div class="tipright">
                <p>是否确认对图片信息的删除 ？</p>
                <cite>如果是请点击确定按钮 ，否则请点取消。</cite>
            </div>
        </div>
        <div class="tipbtn" style="margin-top: 50px;">
            <input name="" type="button" class="sure" value="确定" id="deleteOk"/>&nbsp;
            <input name="" type="button" class="cancel" value="取消"/>
        </div>
    </div>
    <!--修改框-->
    <div class="tip" id="modifyDiv" style="height: 500px;">
        <div class="tiptop"><span>修改轮播图信息</span><a></a></div>
        <div>
            <div style="margin-top: 10px;">
                <div style="height: 100px;margin-left: 10px;">
                    <input type="file" style="float: left;" id="modifyImageInput">
                    <div id="modifyImageDiv"
                         style="float: left;width: 220px;height: 100px;border: skyblue 1px solid;margin-left: 20px;">

                    </div>
                </div>
                <div style="margin:10px 10px 10px 30px;">
                    <ul style="float: left;">
                        <li style="margin:10px 10px 10px 0px;font-size: 15px;text-align: right;">图片名称</li>
                        <li style="margin:0px 10px 10px 0px;font-size: 15px;text-align: right;">图片描述</li>
                        <li style="margin:103px 10px 10px 0px;font-size: 15px;text-align: right;">图片显示位置</li>
                        <li style="margin:0px 10px 10px 0px;font-size: 15px;text-align: right;">图片是否启用</li>
                        <li style="margin:0px 10px 10px 0px;font-size: 15px;text-align: right;">图片权重</li>
                    </ul>
                    <ul style="float: left;">
                        <li style="display: none"><input type="text" id="modifySwiperSwId"></li>
                        <li style="margin:13px 0px 10px 0px;"><input id="modifySwiperName" type="text"
                                                                     style="height: 20px;" placeholder="名称不能超过20个字">
                        </li>
                        <li style="margin:0px 0px 10px 0px;"><textarea id="modifySwiperDesc"
                                                                       style="width: 146px;height: 100px;border: silver 0.3px solid;"
                                                                       placeholder="字数不能超过80字"></textarea></li>
                        <li style="margin:17px 0px 10px 0px;">
                            <select id="modifySwiperSwLoc">
                                <option value="0">显示至酒店详情页</option>
                                <option value="1">显示至平台主页</option>
                            </select>
                        </li>
                        <li style="margin:15px 0px 10px 0px;">
                            <select id="modifySwiperSwStatus">
                                <option value="0">否</option>
                                <option value="1">是</option>
                            </select>
                        </li>
                        <li style="margin:0px 0px 10px 0px;"><input id="modifySwiperSwSequence" type="text"
                                                                    style="height: 20px;width: 30px;" placeholder="1~99"
                                                                    onkeyup="value=value.replace(/[^\d]/g,'')"></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="tipbtn" style="margin-top: 280px;">
            <input name="" type="button" class="sure" value="确定" id="modifyOK"/>&nbsp;
            <input name="" type="button" class="cancel" value="取消"/>
        </div>
    </div>
</div>


<script type="text/javascript">
    $('.tablelist tbody tr:odd').addClass('odd');
</script>
<script>
    //获取图片真实地址的方法
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        }
        else if (window.URL != undefined) {
            // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        }
        else if (window.webkitURL != undefined) {
            // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

    //预览图片
    $("#image").change(function () {
        $("#imagePreview").children().remove();//清除以前显示的图片
        var img = "";
        for (var i = 0; i < this.files.length; i++) {
            var url = getObjectURL(this.files[i]);
            if (url) {
                img = "<img src='" + url + "' style='width: 220px;height: 130px;margin-left: 20px'/>"
                $("#imagePreview").append(img);
            }
        }
    });
</script>
<!--获取酒店所有轮播图-->
<script type="text/javascript">
    var nowPage; //当前页数
    var countPage;  //总页数
    getSwiper(1);//窗口加载，获取轮播图第一页的数据

    /**
     * 翻页
     * @param flip -1上一页 0跳转页 1下一页
     */
    function flip(flip) {
        switch (flip) {
            case -1:
                if (nowPage - 1 > 0) {
                    nowPage = nowPage - 1;
                    getSwiper(nowPage);//根据页码查询已完成订单
                } else {
                    alert("已经是第一页了");
                }
                break;
            case 0:
                var findPageNum = $("#finPageBox").val();
                if (findPageNum > 0 && findPageNum <= countPage) {
                    getSwiper(findPageNum);
                } else {
                    alert("页码错误!");
                }
                break;
            case 1:
                if ((nowPage * 1 + 1) <= countPage) {
                    nowPage = nowPage * 1 + 1;
                    getSwiper(nowPage);//根据页码查询已完成订单
                } else {
                    alert("已经是最后一页了");
                }
                break;
            default:
                alert("翻页请求错误！");
        }
    }

    //获取轮播图，根据页码和搜索条件
    function getSwiper(pageNumber, name, desc, swLoc) {
        // var param = {
        //     "swName": name,
        //     "swDesc": desc,
        //     "swLoc": swLoc
        // };
        // var paramObj = {
        //     "currentPage": pageNumber,
        //     "pageSize": 10,
        //     "swiper": param
        // };
        $.ajax({
            url: "http://localhost:8080/swiperController/allSwiperByHotelId",
            type: "POST",
            // data: JSON.stringify(paramObj),
            data: {
                "currentPage": pageNumber,
                "pageSize": 10,
                // "swiper": "swName=" + name + "&swDesc=" + desc + "&swLoc=" + swLoc
                // "swiper": {
                //     "swName": name,
                //     "swDesc": desc,
                //     "swLoc": swLoc
                // }
                "swName": name,
                "swDesc": desc,
                "swLoc": swLoc
            },
            dataType: "json",
            success: function (data) {
                $("#countData").html(data.pageBean.totalCount);//设置总数据条数
                $("#countPage").html(data.pageBean.totalPage);//设置总页数
                countPage = data.pageBean.totalPage;
                $("#nowPage").html(data.pageBean.currentPage);//设置当前页数
                nowPage = data.pageBean.currentPage;
                $("#finPageBox").val(data.pageBean.currentPage);//设置页码框的页数
                if (data != null && data != "") {
                    if (data.pageBean.list.length < 1) {
                        $("#imageAll").html("酒店还没有轮播图，快去添加吧....");
                    } else {
                        var imageAll = $("#imageAll");
                        imageAll.html("");//清空之前的数据
                        var div = "";
                        for (var i = 0; i < data.pageBean.list.length; i++) {
                            var swiper = data.pageBean.list[i];
                            div = "<div style='float: left;border: #b7d5df solid 1px;margin-left:30px;width: 220px;margin-bottom: 20px;'>" +
                                "<img src='" + swiper.swAddr + "' style='height: 100px;width: 220px;'/>" +
                                "<div>" +
                                "<label class='imageNameLabel' style='cursor: pointer;'>图片名称: </label>" +
                                "<label style='width: 100px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;'>" + swiper.swName + "</label>" +
                                "<p class='imageNameP' style='z-index:1;width: 220px;position:absolute;display:none;background: lightyellow;word-wrap:break-word;border: 0.5px solid goldenrod'>" + swiper.swName + "</p>" +
                                "</div>" +
                                "<div style='margin-top: 10px;'>" +
                                "<label class='imageDescLabel' style='cursor: pointer;'>图片描述: </label>" +
                                "<label style='width: 100px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;'>" + swiper.swDesc + "</label>" +
                                "<p class='imageDescP' style='z-index:1;width: 220px;position:absolute;display:none;background: lightyellow;word-wrap:break-word;border: 0.5px solid goldenrod'>" + swiper.swDesc + "</p>" +
                                "</div>" +
                                "<p style='margin-top: 10px;'>" +
                                "<input type='checkbox' class='checkbox' value='" + swiper.swId + "'>" +
                                "<label onclick='modify(" + swiper.swId + ")' style='border: sandybrown 1px solid;background:lightgrey;padding: 3px 10px;border-radius:3px;position: relative;left: 135px;top: -5px;cursor: pointer;'>" +
                                "<img src='/resources/hotel/images/t02.png' style='width: 18px;height: 18px;'/>修改" +
                                "</label>" +
                                "</p>" +
                                "</div>";
                            imageAll.append(div);
                        }
                        //鼠标悬停至图片名称
                        $(".imageNameLabel").mouseover(function () {
                            $(this).siblings().css("display", "block");//让图片名称显示
                        });
                        $(".imageNameLabel").mouseout(function () {//离开时让名称隐藏
                            $(".imageNameP").css("display", "none");
                        });
                        //鼠标悬停至图片描述
                        $(".imageDescLabel").mouseover(function () {
                            $(this).siblings().css("display", "block");//让图片描述显示
                        });
                        $(".imageDescLabel").mouseout(function () {//离开时让描述隐藏
                            $(".imageDescP").css("display", "none");
                        });
                        //当有轮播图的时候显示删除按钮
                        $("#deleteSpan").show();

                        //点击了删除选中
                        $("#deleteSpan").click(function () {
                            $("#deleteTip").show();
                        });
                        //点击了确认删除
                        $("#deleteOk").click(function () {
                            var list = [];
                            var swids = $(".checkbox");
                            console.log(swids.eq(0).val())
                            for (var i = 0; i < swids.length; i++) {
                                var swiper = {};
                                if (swids.eq(i).is(':checked')) {
                                    var swid = swids.eq(i).val();
                                    swiper.swId = swid;
                                    list.push(swiper);
                                }
                            }
                            console.log(list);
                            $.ajax({
                                url: "http://localhost:8080/swiperController/deleteSwiperById",
                                type: "post",
                                data: JSON.stringify(list),
                                dataType: "json",
                                contentType: "application/json",
                                success: function (data) {
                                    if (data.success == true) {
                                        $("#deleteTip").hide();
                                        alert("删除成功！");
                                        window.location.reload();//刷新当前页面
                                    } else {
                                        $("#deleteTip").hide();
                                        alert(data.errMsg);
                                    }
                                },
                                error: function () {
                                    alert("访问错误！！");
                                }
                            });
                        });
                    }
                } else {
                    console.log("没有获取到酒店的轮播图信息");
                }
            },
            error: function () {
                alert("访问错误！");
            }
        });
    }

    //轮播图搜索功能
    var swName;
    var swDesc;
    var swLoc;
    //点击搜索按钮
    $("#find").click(function () {
        swName = $("#nameOfFind").val();
        swDesc = $("#descOfFind").val();
        swLoc = $("#swLocOfFind").val();
        getSwiper(1, swName, swDesc, swLoc);
    });


</script>
<!--添加轮播图-->
<script type="text/javascript">
    var trNumber = 0;//添加轮播图tr的行数
    //添加行
    $("#addTr").click(function () {
        if (trNumber < 6) {
            trNumber++;
            $("#addOK").css("display", "block");//显示确认添加的div
            $("#addTbody").append("<tr style='height: 75px;' class='swiper'>" +
                "<td><input type='text' placeholder='名称不能超过20个字' class='imageName' name='imageName' style='height: 25px;border: solid 1px darkgrey;'></td>" +
                "<td><input type='text'placeholder='请输入图片描述，不能超过80个字' class='imageDesc'  name='imageDesc' style='height: 25px;border: solid 1px darkgrey;width: 250px;'></td>" +
                "<td><input type='file' placeholder='请选择图片' class='imageInput'  name='imageInput'></td>" +
                "<td class='imgaeTd' style='width: 182px;'></td>" +
                "<td>" +
                "<select style='border: sandybrown 1px solid;'>" +
                "<option value='1'>用于显示于酒店详情页</option>" +
                "<option value='0'>用于显示于平台主页</option>" +
                "</select>" +
                "</td>" +
                "<td>" +
                "<select style='border: sandybrown 1px solid;'>" +
                "<option value='1'>是</option>" +
                "<option value='0'>否</option>" +
                "</select>" +
                "</td>" +
                "<td>" +
                "<input type='text' onkeyup=\"value=value.replace(/[^\\d]/g,'')\" placeholder='1~99' style='width: 50px;height:25px;border: #7b7b7b 0.5px solid;'>" +
                "</td>" +
                "<td><a class='deleteTr'>删除这行</a></td>" +
                "</tr>");
            //图片预览
            $(".imageInput").change(function () {
                var imgaeTd = $(this).parent().siblings(".imgaeTd");//获取放图片的td
                imgaeTd.html("");//清空以前的数据
                for (var i = 0; i < this.files.length; i++) {
                    var url = getObjectURL(this.files[i]);
                    if (url) {
                        img = "<img src='" + url + "' style='width: 170px;height: 60px;'/>"
                        imgaeTd.append(img);
                    }
                }
            });
            //点击删除行
            $(".deleteTr").click(function () {
                trNumber--;
                $(this).parent().parent().remove();
                var trNumber = $(".deleteTr").length;
                if (trNumber == 0) {//当所有tr都被删除掉的时候隐藏确认按钮
                    $("#addOK").css("display", "none");
                }
            });
        } else {
            alert("一次性最多只能添加6张轮播图...");
        }
    });


    //确认添加
    $("#addOK").click(function () {
        var status = 0;
        var formData = new FormData();
        var swiperList = [];
        $(".swiper").map(function (index, item) {
            var swiper = {};
            swiper.swName = $(item).find(".imageName").val();
            swiper.swDesc = $(item).find(".imageDesc").val();
            if (swiper.swName != null && swiper.swName != "" && swiper.swDesc != null && swiper.swDesc != "") {
                if (swiper.swName.length < 20) {
                    if (swiper.swDesc.length < 80) {
                        swiperList.push(swiper);
                    } else {
                        alert("描述超过80字,不能添加。。。");
                        status = 1;
                    }
                } else {
                    alert("名称超过20字,不能添加。。。");
                    status = 1;
                }
            } else {
                alert("请输入图片名称或者描述！");
                status = 1;
            }
        })
        if (status == 0) {
            formData.append("swiperList", JSON.stringify(swiperList));
            $(".imageInput").map(function (index, item) {
                if ($(".imageInput")[index].files.length > 0) {
                    formData.append("swiperImg" + index, $(".imageInput")[index].files[0]);
                }
            })

            $.ajax({
                url: "http://localhost:8080/swiperController/addSwipers",
                type: "POST",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success: function (data) {
                    if (data.success == true) {
                        $("#addTbody").html("");//清空以前的数据
                        alert("添加成功！");
                        window.location.reload();//刷新当前页面
                    } else {
                        alert(data.errMsg);
                    }
                },
                error: function () {
                    alert("访问错误！");
                }
            });
        }
    });

    //修改轮播图信息
    function modify(id) {
        $.ajax({
            url: "http://localhost:8080/swiperController/selectOneSwiperById",
            type: "get",
            data: {"swiperId": id},
            dataType: "json",
            success: function (data) {
                if (data != null & data != "") {
                    var img = "<img src='" + data.swiper.swAddr + "' style='width: 220px;height: 100px;'>";
                    $("#modifyImageDiv").empty();
                    $("#modifyImageDiv").append(img);
                    $("#modifySwiperSwId").val(id);
                    $("#modifySwiperName").val(data.swiper.swName);
                    $("#modifySwiperDesc").val(data.swiper.swDesc);
                    $("#modifySwiperSwLoc").val(data.swiper.swLoc);
                    $("#modifySwiperSwStatus").val(data.swiper.swStatus);
                    $("#modifySwiperSwSequence").val(data.swiper.swSequence);
                    $("#modifyDiv").show();//显示修改框
                    imagePreview($("#modifyImageInput"), $("#modifyImageDiv"), 220, 100);//修改框的图片预览
                } else {
                    alert("请求数据错误！");
                }
            },
            error: function () {
                alert("访问错误！");
            }
        });
    }

    //点击确认修改
    $("#modifyOK").click(function () {
        var formData = new FormData();
        var swiper = {};
        swiper.swId = $("#modifySwiperSwId").val();
        swiper.swName = $("#modifySwiperName").val();
        swiper.swDesc = $("#modifySwiperDesc").val();
        swiper.swLoc = $("#modifySwiperSwLoc").val();
        swiper.swStatus = $("#modifySwiperSwStatus").val();
        swiper.swSequence = $("#modifySwiperSwSequence").val();
        formData.append("swiperStr", JSON.stringify(swiper));
        formData.append("swiperImg", $("#modifyImageInput").get(0).files[0]);
        $.ajax({
            url: "http://localhost:8080/swiperController/updateSwiper",
            type: "POST",
            data: formData,
            dataType: "json",
            processData: false,
            contentType: false,
            cache: false,
            success: function (data) {
                if (data.success == true) {
                    $("#addTbody").html("");//清空以前的数据
                    alert("修改成功");
                    window.location.reload();//刷新当前页面
                } else {
                    alert(data.errMsg);
                }
            },
            error: function () {
                alert("访问错误！");
            }
        });
    });
</script>
</body>
</html>
